<script setup lang="ts">
import { ref } from "vue"
import { getInventorDetailsApi as getDetailsApi } from "@/api/billv2"

const tableData = ref<any>({
  frontlist: {},
  backlist: []
})
const frontlist = ref<any>({})
const backlist = ref<any>([])
const dialogFormVisible = ref(false)
const inventory_id = ref(0)

const dialogShow = async (row: any) => {
  dialogFormVisible.value = true
  inventory_id.value = row.inventory_id
  getDetails()
}
defineExpose({ dialogShow })

//#region 获取详情
const getDetails = () => {
  getDetailsApi({ inventory_id: inventory_id.value }).then((res: any) => {
    tableData.value = res.data
    frontlist.value = res.data.frontlist
    backlist.value = res.data.backlist
  })
}

// const toChineseUpperCase = (amount: any) => {
//   const numbers = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]
//   const units = ["", "拾", "佰", "仟"]
//   const section = ["", "万", "亿", "兆"]

//   // 处理整数部分
//   const integerPart = Math.floor(amount)
//   let result = ""
//   let integerStr = integerPart.toString()
//   const integerLength = integerStr.length
//   const groupCount = Math.ceil(integerLength / 4)

//   for (let i = 0; i < groupCount; i++) {
//     const curSection = integerStr.slice(-4) // 取末尾四位
//     integerStr = integerStr.slice(0, -4) // 去掉末尾四位

//     let sectionStr = ""
//     for (let j = 0; j < curSection.length; j++) {
//       const num = parseInt(curSection[j])
//       if (num !== 0 || sectionStr.length > 0) {
//         sectionStr += numbers[num] + units[curSection.length - j - 1]
//       }
//     }
//     sectionStr += section[i]
//     result = sectionStr + result
//   }

//   // 处理小数部分
//   const decimalPart = Math.round((amount - integerPart) * 100)
//   if (decimalPart > 0) {
//     result += "点"
//     const decimalStr = decimalPart.toString()
//     for (let i = 0; i < decimalStr.length; i++) {
//       const num = parseInt(decimalStr[i])
//       result += numbers[num]
//     }
//   } else {
//     result += "整"
//   }

//   return result
// }
//#endregion

// 根据索引获取对应的背书字段值
const getEndorseValue = (item: any, index: number) => {
  const fieldMap = [
    "", // 第0个是标题"转让背书"，不需要显示值
    item.endorseFirColumn, // 背书人名称
    item.endorseSecColumn, // 被背书人名称
    item.endorseThrColumn, // 是否可转让
    item.endorseForColumn // 背书日期
  ]
  return fieldMap[index] || ""
}

const handleClose = () => {
  tableData.value = {
    frontlist: {}
  }
  frontlist.value = {}
  dialogFormVisible.value = false
  emit("dialogClose", true)
}
const emit = defineEmits(["dialogClose"])
</script>

<template>
  <el-dialog
    draggable
    destroy-on-close
    :before-close="handleClose"
    v-model="dialogFormVisible"
    title="票面信息"
    width="990px"
  >
    <el-tabs tab-position="left" class="demo-tabs">
      <el-tab-pane label="正面">
        <div class="front">
          <div class="connt">
            <div class="log">
              <img src="@/assets/bill/face/front_log.png" alt="" />
            </div>
            <div class="title">电子银行承兑汇票</div>
            <div class="row">
              <div class="piece">出票日期：{{ frontlist.billOutDate }}</div>
              <div class="piece">票据状态：{{ frontlist.billState }}</div>
            </div>
            <div class="row">
              <div class="piece">汇票到期日：{{ frontlist.expirationDate }}</div>
              <div class="piece">票据号码：{{ frontlist.billNo }}</div>
            </div>
            <!-- <div class="row">
              <div class="piece">&nbsp;</div>
              <div class="piece">
                子票区间：{{ frontlist.billRangeLower == "" ? 0 : frontlist.billRangeLower }}
                <span style="padding: 0 10px">-</span>
                {{ frontlist.billRangeUpper == "" ? 0 : frontlist.billRangeUpper }}
              </div>
            </div> -->
            <div class="table">
              <table>
                <tr>
                  <td rowspan="4" class="width10 text-align-center">出票人</td>
                  <td class="width10 text-align-center">账户</td>
                  <td>{{ frontlist.drawerAccount }}</td>
                  <td rowspan="4" class="width10 text-align-center">收款人</td>
                  <td class="width10 text-align-center">账户</td>
                  <td>{{ frontlist.takerAccount }}</td>
                </tr>
                <tr>
                  <td class="width10 text-align-center">全称</td>
                  <td>{{ frontlist.drawerName }}</td>
                  <td class="width10 text-align-center">全称</td>
                  <td>{{ frontlist.takerName }}</td>
                </tr>
                <tr>
                  <td class="width10 text-align-center">开户行</td>
                  <td>{{ frontlist.drawerOpenAccBankName }}</td>
                  <td class="width10 text-align-center">开户行</td>
                  <td>{{ frontlist.takerOpenAccBankName }}</td>
                </tr>
                <tr>
                  <td class="width10 text-align-center">开户行号</td>
                  <td>{{ frontlist.drawerOpenAccBankNo }}</td>
                  <td class="width10 text-align-center">开户行号</td>
                  <td>{{ frontlist.takerOpenAccBankNo }}</td>
                </tr>
                <tr>
                  <td colspan="2" class="text-align-center">出票人保证信息</td>
                  <td>
                    <div>&nbsp;保证人账号：{{ frontlist.drawerGuarantorAccount }}</div>
                    <div>&nbsp;保证人名称：{{ frontlist.drawerGuarantorName }}</div>
                  </td>
                  <td colspan="3">
                    <div style="display: flex">
                      <div style="text-align: right">
                        <div>&nbsp;保证人开户行：</div>
                        <div>&nbsp;保证人开户行号：</div>
                      </div>
                      <div>
                        <div>{{ frontlist.drawerOpenAccBankName }}</div>
                        <div>{{ frontlist.drawerOpenAccBankNo }}</div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="text-align-center">票据金额</td>
                  <td>&nbsp;小写：¥{{ frontlist.billAmount }}</td>
                  <td colspan="3">&nbsp;人民币（大写）：{{ frontlist.bigCnBillAmount }}</td>
                </tr>
                <tr>
                  <td colspan="2" class="text-align-center">承兑人</td>
                  <td>
                    <div>&nbsp;承兑人账号：{{ frontlist.acceptorAccount }}</div>
                    <div>&nbsp;承兑人名称：{{ frontlist.acceptorName }}</div>
                  </td>
                  <td colspan="3">
                    <div style="display: flex">
                      <div style="text-align: right">
                        <div>&nbsp;承兑人开户行：</div>
                        <div>&nbsp;承兑人开户行号：</div>
                      </div>
                      <div>
                        <div>{{ frontlist.acceptorBankName }}</div>
                        <div>{{ frontlist.acceptorBankNo }}</div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="width10 text-align-center">交易合同号</td>
                  <td>&nbsp;{{ frontlist.businessContractNo }}</td>
                  <td rowspan="3">承兑信息</td>
                  <td colspan="2">&nbsp;出票人承诺：{{ frontlist.drawerPromise }}</td>
                </tr>
                <tr>
                  <td rowspan="2" colspan="2" class="width10 text-align-center">是否可转让</td>
                  <td rowspan="2">&nbsp;{{ frontlist.transferStatus }}</td>
                  <td colspan="2">&nbsp;承兑人承兑：{{ frontlist.acceptorPromise }}</td>
                </tr>
                <tr>
                  <td colspan="2">&nbsp;承兑日期：{{ frontlist.acceptorDate }}</td>
                </tr>
                <tr>
                  <td colspan="2" class="text-align-center">承兑人保证信息</td>
                  <td>
                    <div>&nbsp;保证人账号：{{ frontlist.acceptorGuarantorAccount }}</div>
                    <div>&nbsp;保证人名称：{{ frontlist.acceptorGuarantorName }}</div>
                  </td>
                  <td colspan="3">
                    <div style="display: flex">
                      <div style="text-align: right">
                        <div>&nbsp;保证人开户行：</div>
                        <div>&nbsp;保证人开户行号：</div>
                      </div>
                      <div>
                        <div>{{ frontlist.acceptorGuarantorBankName }}</div>
                        <div>{{ frontlist.acceptorGuarantorBankNo }}</div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="width10 text-align-center">评级信息</td>
                  <td colspan="4" style="padding: 0 !important; margin: 0 !important">
                    <div style="display: flex">
                      <div style="border-right: 1px solid #000; padding: 6px">出票人</div>
                      <div style="width: 80%; display: flex; justify-content: space-between; align-items: center">
                        <div>评级主体：{{ frontlist.drawerMainBody }}</div>
                        <div>信用等级：{{ frontlist.drawerCreditRating }}</div>
                        <div>评级到期日：{{ frontlist.drawerCommentDate }}</div>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="width10 text-align-center">备注</td>
                  <td colspan="4">&nbsp;</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="背面">
        <div class="back">
          <div class="connt">
            <div class="log">
              <img src="@/assets/bill/face/front_log.png" alt="" />
            </div>
            <div class="title">电子银行承兑汇票</div>
            <div>票据号码：{{ tableData.billNo }}</div>
            <div class="back_box">
              <div class="box" v-for="(item, index) in backlist" :key="index">
                <div class="box_title">{{ item.columsInfo[0] }}</div>
                <template v-for="(label, index) in item.columsInfo" :key="index">
                  <div class="row" v-if="index > 0">
                    <div class="label">&nbsp;{{ label }}</div>
                    <div>&nbsp;{{ getEndorseValue(item, index) }}</div>
                  </div>
                </template>
                <!-- <div class="row">
                  <div class="label">&nbsp;背书人名称</div>
                  <div>&nbsp;{{ item.endorseFirColumn }}</div>
                </div>
                <div class="row">
                  <div class="label">&nbsp;被背书人名称</div>
                  <div>&nbsp;{{ item.endorseSecColumn }}</div>
                </div>
                <div class="row">
                  <div class="label">&nbsp;是否可转让</div>
                  <div>&nbsp;{{ item.endorseThrColumn }}</div>
                </div>
                <div class="row">
                  <div class="label">&nbsp;背书日期</div>
                  <div>&nbsp;{{ item.endorseForColumn }}</div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="瑕疵">Role</el-tab-pane> -->
    </el-tabs>
  </el-dialog>
</template>

<style scoped lang="scss">
.front {
  width: 100%;
  // height: 500px;
  // 背景渐变色中间向两边渐变
  background: linear-gradient(to right, #ddf1f8 0%, #fdebdd 50%, #ddf1f8 100%);
  .connt {
    width: 98%;
    margin: 0 auto;
    .log {
      width: 100%;
      height: 100px;
      img {
        width: 25%;
      }
    }
    .title {
      font-size: 32px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .row {
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      .piece {
        width: 50%;
      }
    }
    .table {
      width: 100%;
      table {
        width: 100%;
        border: 1px solid #000;
        border-spacing: 0 !important; /* 使用 !important 强制应用样式 */
        border-collapse: collapse; /* 合并边框 */
        tr {
          border-top: 1px solid #000;
          td {
            padding: 8px;
            border-right: 1px solid #000;
            box-sizing: border-box; /* 让 padding 和 border 包含在总宽度和高度中 */
          }
        }
      }
    }
  }
}

.back {
  width: 100%;
  background: linear-gradient(to right, #ddf1f8 0%, #fdebdd 50%, #ddf1f8 100%);
  .connt {
    width: 98%;
    margin: 0 auto;
    .log {
      width: 100%;
      height: 100px;
      img {
        width: 25%;
      }
    }
    .title {
      font-size: 32px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .back_box {
      width: 100%;
      .box {
        width: 100%;
        border: 1px solid #000;
        margin-bottom: 10px;
        .box_title {
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #000;
        }
        .row {
          width: 100%;
          display: flex;
          border-bottom: 1px solid #000;

          .label {
            width: 20%;
            border-right: 1px solid #000;
          }
        }
      }
    }
  }
}
.width10 {
  width: 10%;
}
.text-align-center {
  text-align: center;
}
</style>
